<template>
    <a-popup
        :popPlacement="popPlacement"
        :useTargetWidth="true"
        :maxHeight="maxHeight"
        class="a-input-select"
        v-model:popShown="popShown"
        ref="popup"
    >
        <a-control-group
            class="a-input-select"
            :class="[formItem ? 'c-f-grow-1' : '']"
        >
            <a-input-string
                class="c-f-grow-1"
                :color="myColor"
                :size="mySize"
                :sharp="mySharp"
                :disabled="myDisabled"
                :value="displayText"
                :placeholder="placeholder"
                :readonly="true"
                :clearable="clearable"
                :isInner="true"
                @click="popShown = !popShown"
                @clear="input(null)"
            ></a-input-string>
            <a-button
                v-if="attachButtonShown"
                class="c-f-shrink-0"
                :color="myColor"
                :size="mySize"
                :sharp="mySharp"
                :disabled="myDisabled"
                :square="true"
                ref="btn"
                @click="popShown = !popShown"
                ><span class="fa fa-fw fa-angle-down"></span></a-button
        ></a-control-group>

        <template v-slot:pop>
            <a-control-group
                direction="v"
                :block="true"
                class="pop"
                :class="[
                    !mySharp ? `c-round-${mySize}` : '',
                    ` c-shadow-${mySize}`,
                ]"
            >
                <a-input-check-box-single
                    :color="myColor"
                    :size="mySize"
                    :sharp="mySharp"
                    :disabled="myDisabled || getDisabledFunc(a)"
                    :block="true"
                    :plain="true"
                    v-for="a in items"
                    :key="getTextFunc(a)"
                    :isInner="true"
                    @click="clickItem(a)"
                    :value="value == getValueFunc(a)"
                    class="c-layout-h c-between-center c-f-shrink-0"
                >
                    <template v-slot:prepend>
                        <span>{{ getTextFunc(a) }}</span>
                    </template>
                    <template v-slot:checkedFlag>
                        <span class="fa fa-fw fa-check"></span>
                    </template>
                    <template v-slot:unCheckedFlag>
                        <span></span>
                    </template>
                </a-input-check-box-single>
            </a-control-group>
        </template>
    </a-popup>
</template>

<style lang="scss" scoped>
@import "../scss/vars";

.a-input-select {
    width: 280px;
}

.pop {
    background-color: $defaultBgColor;
}
</style>

<script>
import AInputString from './AInputString.vue'
import AButton from './AButton.vue'
import AControlGroup from './AControlGroup.vue'
import APopup from './APopup.vue'
import AInputCheckBoxSingle from './AInputCheckBoxSingle.vue'
import inputMixin from "../common/inputMixin"
import selectMixin from '../common/selectMixin'

export default {
    components: { AInputString, AButton, AControlGroup, APopup, AInputCheckBoxSingle },
    mixins: [inputMixin, selectMixin],
    props: {
        value: null,
        items: {
            type: Array,
            default: [],
        },
        getTextFunc: {
            type: Function,
            default: a => a.text,
        },
        getValueFunc: {
            type: Function,
            default: a => a.value,
        },
        getDisabledFunc: {
            type: Function,
            default: a => a.disabled,
        },
        /**
         * 对齐到target的位置
         */
        popPlacement: {
            type: String,
            default: 'bottom'
        },
        clearable: {
            type: Boolean,
            default: true,
        },
        maxHeight: {
            type: Number,
            default: null
        },
        placeholder: {
            type: String,
            default: null
        },
        attachButtonShown: {
            type: Boolean,
            default: true,
        }
    },
    data() {
        return {
            popShown: false,
        }
    },
    computed: {
        displayText() {
            let item = this.items.find(a => this.getValueFunc(a) == this.value)
            if (item != null) {
                return this.getTextFunc(item)
            }
            return ''
        }
    },
    methods: {
        input(val) {
            this.$emit('update:value', val)
        },
        clickItem(item) {
            this.input(this.getValueFunc(item))
            this.popShown = false
        },
    },
}
</script>